<template>
  <view class="carousel">
    <swiper :circular="true" autoplay :interval="3000" @change="onChange">
      <swiper-item v-for="banner in bannerList" :key="banner.id">
        <navigator url="/pages/index/index" hover-class="none" class="navigator">
          <image mode="aspectFill" class="image" :src="banner.imgUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text
        v-for="(item, index) in 3"
        :key="item"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { Banner } from '@/types/home'
import { ref } from 'vue'

const activeIndex = ref(0)

const onChange = (event: any) => {
  //断言排除空值
  activeIndex.value = event.detail!.current
}

defineProps<{
  bannerList: Banner[]
}>()

/*const props = defineProps<{
  distributionSite: number //页面上可以直接使用distributionSite，但是ts中使用需要重新定义赋值
}>()
const distributionSite = ref<number>(props.distributionSite)*/
</script>

<style lang="scss">
@import '@/components/styles/XtxSwiper.scss';
</style>
